import React from 'react';
import {Button, Col, Form, Input, Modal, Popconfirm, Row, Select, Table,} from 'antd';
import {PlusOutlined} from '@ant-design/icons';

import {addEvaluationrecord} from '@/services/emergency';
import {filterEmpty} from '@/utils/methods';
import {EmergencyScoreMap} from "@/enums/emergency/map";
import {useRequest} from "ahooks";

const DisposalAssessment: React.FC<any> = ({emergencyId, onSuccess, dispatch, ...props}: any) => {
  const [form] = Form.useForm();
  const {
    run: runAddEva,
    loading: loadingAddEva
    // @ts-ignore
  } = useRequest((values: any) => {
    let list = values.list;
    if (!list.length) {
      return false;
    }
    list = list.map((originValues: any) => ({
      ...filterEmpty({
        originValues,
        keepEmpty: true,
      }),
      emergencyId,
    }));
    return addEvaluationrecord(list)
  },{
    manual:true
  })
  return (
    <Modal
      {...props}
      onCancel={() => {
        dispatch({
          clear: true,
          open: false
        })
      }}
      footer={[
        <Button key="cancel" onClick={() => {
          dispatch({
            clear: true,
            open: false
          })
        }}>
          关闭
        </Button>,
        <Button
          type="primary"
          loading={loadingAddEva}
          onClick={async () => {
            const value: any = await form.validateFields()
            runAddEva(value)
          }}
        >
          归档
        </Button>,
      ]}
    >
      <Form form={form} autoComplete="off">
        <Form.List name="list">
          {(fields, {add, remove}) => (
            <>
              <Table
                size="small"
                dataSource={fields}
                pagination={false}
                rowKey={() => (Math.random() * 10000).toFixed(4)}
                columns={[
                  // {
                  //   title: '序号',
                  //   render: (_: number, __: any, index: number) => getOrder(index)
                  // },
                  {
                    title: '评估内容',
                    dataIndex: 'content',
                    key: 'content',
                    render(_: any, record: any) {
                      return (
                        <Form.Item
                          {...record}
                          name={[record.name, 'content']}
                          fieldKey={[record.fieldKey, 'content']}
                          noStyle
                        >
                          <Input placeholder="50字以内"/>
                        </Form.Item>
                      );
                    },
                  },
                  {
                    title: '评估分值',
                    dataIndex: 'score',
                    key: 'score',
                    render(_: any, record: any) {
                      return (
                        <Form.Item
                          {...record}
                          name={[record.name, 'score']}
                          fieldKey={[record.fieldKey, 'score']}
                          noStyle
                        >
                          <Select
                            options={EmergencyScoreMap.toOption()}
                            placeholder="请选择"
                            style={{width: '150px'}}
                          ></Select>
                        </Form.Item>
                      );
                    },
                  },
                  {
                    title: '评估意见',
                    dataIndex: 'opinion',
                    key: 'opinion',
                    render(_: any, record: any) {
                      return (
                        <Form.Item
                          {...record}
                          name={[record.name, 'opinion']}
                          fieldKey={[record.fieldKey, 'opinion']}
                          noStyle
                        >
                          <Input placeholder="50字以内"/>
                        </Form.Item>
                      );
                    },
                  },
                  {
                    title: (
                      <PlusOutlined
                        onClick={() => {
                          add();
                        }}
                      />
                    ),
                    dataIndex: 'name',
                    key: 'name',
                    width: 60,
                    render(_: any, record: any) {
                      return (
                        <Popconfirm
                          title="确定要删除该条评估吗？"
                          okText="确定"
                          cancelText="取消"
                          onConfirm={() => {
                            remove(record.name);
                          }}
                          overlayStyle={{width: '200px'}}
                        >
                          <Button>删除</Button>
                        </Popconfirm>
                      );
                    },
                  },
                ]}
              ></Table>
            </>
          )}
        </Form.List>
      </Form>
      <Row gutter={24} style={{marginTop: '20px'}}>
        <Col span={8}>评估人：</Col>
        <Col span={8}>评估人电话：</Col>
        <Col span={8}>评估时间：</Col>
      </Row>
    </Modal>
  );
}

export default DisposalAssessment;
